<template>
  <el-dialog
    title="修改应用"
    :visible.sync="dialogVisible"
  >
    <el-form
      @keyup.enter.native="update"
      ref="editDataForm"
      :model="dataForm"
      label-width="200px"
      :show-message="false"
    >
      <el-form-item
        prop="name"
        label="应用名称"
        required
      >
        <el-tooltip
          class="el-tooltip"
          content="应用的名称"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-input
          class="input"
          v-model="dataForm.name"
          auto-complete="off"
          placeholder="请输入应用名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="organizationIdList"
        label="组织"
        required
      >
        <el-tooltip
          class="el-tooltip"
          content="微信小程序或微信公众号的所属组织"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-select
          multiple
          class="input"
          v-model="dataForm.organizationIdList"
        >
          <el-option
            v-for="item in organizationList"
            :label="item.name"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        prop="active"
        label="是否启用"
        required
      >
        <el-tooltip
          class="el-tooltip"
          content="是否启用该应用，只有启用的应用才能使用"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-select
          class="input"
          v-model="dataForm.active"
        >
          <el-option
            class="input"
            v-for="item in optionStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        class="settings"
        v-for="(item, index) in dataForm.settings"
        :label="'自定义参数'+(index + 1)"
        :key="item.key"
        :prop="'settings.' + index + '.value'"
        required
      >
        <el-input
          v-model="item.name"
          placeholder="参数名"
          class="settings-name"
        ></el-input>
        <el-input
          v-model="item.value"
          placeholder="参数值"
          class="settings-value"
        ></el-input>
        <el-button @click.prevent="removeSetting(item)">删除</el-button>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer buttons"
    >
      <el-button
        class="buttons-add"
        @click="addSetting"
      >新增参数</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="update"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { validateForm } from './service';
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { updateDeviceTypeApi } from '../../../api/deviceType';
import { queryDeviceParameterListApi } from '../../../api/deviceParameter';
import { getOrganizationChildrenList } from '../../../api/organization';
import { updateApplicationApi } from '../../../api/application';

export default {
  data() {
    return {
      optionStatus: [
        {
          value: true,
          label: '启用'
        },
        {
          value: false,
          label: '不启用'
        }
      ],
      uuid: '',
      formLabelWidth: '120px',
      dialogVisible: false,
      btnLoading: false,
      remoteLoading: false,
      parameterList: [],
      dataForm: {
        name: '',
        organizationIdList: [],
        setting: {},
        active: true,
        settings: [],
        uuid: ''
      },
      organizationList: []
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) {
          this.$refs.editDataForm.resetFields();
          this.dataForm.settings = [];
          this.uuid = '';
        }
      }
    }
  },
  methods: {
    showDialog(row) {
      getOrganizationChildrenList()
        .then(res => {
          this.organizationList = res;
        })
        .catch(error => Message.error(parseError(error)));
      this.dataForm.uuid = row.uuid;
      this.dataForm.name = row.name;
      this.dataForm.organizationIdList = row.organizationList.map(item => {
        return item.id;
      });
      this.dataForm.setting = row.setting;
      this.dataForm.active = row.active;
      this.dataForm.settings = row.settingList;
      this.dialogVisible = true;
    },
    update() {
      const validError = validateForm(this.dataForm);
      if (validError) return Message.warning(validError);
      this.btnLoading = true;
      const setting = {};
      this.dataForm.settings.forEach(item => (setting[item.name] = item.value));
      updateApplicationApi(this.dataForm.uuid, this.dataForm.name, this.dataForm.organizationIdList, setting, this.dataForm.active)
        .then(res => {
          Message.success('更新成功');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    removeSetting(item) {
      this.dataForm.settings = this.dataForm.settings.filter(i => i !== item);
    },
    addSetting() {
      this.dataForm.settings.push({
        value: '',
        name: '',
        key: Date.now()
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.el-tooltip {
  margin-right: 10px;
}
.input {
  width: 300px;
}
.settings {
  &-name {
    width: 80px;
  }
  &-value {
    width: 200px;
    margin: 0 20px;
  }
}
.buttons {
  &-add {
    margin-right: 20px;
  }
}
</style>
